<template>
  <div class="index">
    <div>
      <h2 v-if="geth(0) == '2025-10'">{{ geth(0) }}</h2>
      <div v-for="(i, index) in indexList" :key="i.id">
        <div class="item" v-if="geth(index) == '2025-10'">
          <img :src="i.titleImage" alt="" />
          <div>
            <p>{{ i.title }}</p>
            <i class="el-icon-s-order"></i><span>{{ i.createTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- <h2>{{geth(index)}}</h2> -->
      <h2>2025-5</h2>
      <div v-for="(i, index) in indexList" :key="i.id">
        <div class="item" v-if="geth(index) == '2025-05'">
          <img :src="i.titleImage" alt="" />
          <div>
            <p>{{ i.title }}</p>
            <i class="el-icon-s-order"></i><span>{{ i.createTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { index } from "../../../units/api"; //导入使用的接口
export default {
  data() {
    return {
      pageSize: 10, //这个是传入值 界面显示多少条
      page: 1, //当前页
      // currentPage1:1,
      indexList: [], //用于接收渲染的数组
      count: 0,
    };
  },
  created() {
    this.getListAPI();
  },
  computed: {},
  methods: {
    geth(index) {
 
        let date = this.indexList[index].createTime.slice(0, 7);
      return date;
     
    },
    async getListAPI() {
      let res = await index({ current: this.page, size: this.pageSize });
      console.log(res, "这里是index");
      this.indexList = structuredClone(res.data.data);
      this.count = res.data.total;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getListAPI();
    },
  },
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.index {
  & > div {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
  }
  h2 {
    height: 50px;
    line-height: 60px;
    text-align: left;
  }
  .item {
    width: 100%;
    height: 100px;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    // align-items: center;
    border-bottom: 1px solid;
    cursor: pointer;
    &:hover {
      background-color: #e0e0e0;
    }

    img {
      width: 70px;
      height: 50px;
      margin-right: 10px;
    }
    & > div {
      line-height: 30px;
    }
  }
}
.pagination {
  margin: 0 auto;
}
</style>